<template>
      <div class="banner">
             <div class="banner-top">
                 <img @click="showGallaryClick" class="banner-top-image" src="https://img1.qunarzz.com/sight/p0/1508/89/895a1b7add84f23faca053ce9e3153db.water.jpg_600x330_93d96bdf.jpg" alt="">
                 <div class="banner-top-jiant" @click="close">
                     <span class="iconfont">&#xe600;</span>
                 </div>
                 <div class="banner-top-main">
                       <span class="iconfont">&#xe61b;</span>
                       <span>71</span>
                       <h4>北京圆明园</h4>
                 </div>
             </div>
             <common-gallary @closeSwiper="closeGallary" v-show="this.showGallary"></common-gallary>
      </div>
</template>

<script>
    import CommonGallary from '@/common/gallary/Gallary'
    export default {
        name: "Banner",
        data () {
           return {
              showGallary: false
           }
        },
        components : { //注册组件
          CommonGallary
        },
        methods : {
           close () {//点击箭头跳转到主页面
               this.$router.push('/');
           },
           showGallaryClick () {
               this.showGallary = true;
           },
           closeGallary () {
               this.showGallary = false;
           }
        }
    }
</script>

<style lang="stylus" scoped>
   .banner
     width : 100%
     .banner-top
       .banner-top-image{
          width : 100%
          position: relative
        }
       .banner-top-jiant{
           width: .36rem
           height : .36rem
           line-height : .36rem
           text-align: center
           font-size : .2rem
           color : #ffffff
           background : #333333
           opacity : .5
           border-radius : 50%
           position : absolute
           left: .10rem
           top:.05rem
           bottom:0
       }
       .banner-top-main{
           position : absolute
           left : .10rem
           top : 1.6rem
           bottom : 0
           color : #ffffff
           span{
              font-size : .15rem
              color : yellow
           }
           span:last-of-type{
              color : #ffffff
           }
           h4{
              font-size .18rem
              letter-spacing : .04rem
              margin : .04rem 0
           }
       }
</style>
